<template>
  <el-dialog
    :title="uuid ? '编辑动态' : '添加动态'"
    :visible.sync="dialogFormVisible"
    width="800px"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="left"
      label-width="100px"
      style="margin: 0 30px"
    >
      <template>
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="temp.title" />
        </el-form-item>
        <el-form-item label="缩略图" required>
          <img-upload
            v-model="temp.thumbnail_url"
            class-name="banner-upload"
            tip-size="379px 260px"
          />
        </el-form-item>
        <el-form-item label="摘要" prop="summary">
          <el-input
            v-model="temp.summary"
            :rows="4"
            type="textarea"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <editor v-model="temp.content" />
        </el-form-item>
        <el-form-item label="日期" prop="publish_date">
          <el-date-picker
            v-model="temp.publish_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="saveData">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDetail, add, edit } from '@/api/examples'
import ImgUpload from '@/components/ImgUpload'
import Editor from '@/components/Editor'
import { parseTime } from '@/utils'

export default {
  name: 'NewsEdit',
  components: { ImgUpload, Editor },
  data() {
    return {
      dialogFormVisible: false,
      uuid: '',
      temp: {
        title: '',
        thumbnail_url: '',
        summary: '',
        content: '',
        publish_date: ''
      },
      rules: {
        title: [{ required: true, message: '必填项不能为空' }],
        publish_date: [{ required: true, message: '必填项不能为空' }]
      }
    }
  },
  methods: {
    // 添加
    handleCreate() {
      this.uuid = ''
      this.temp = {
        title: '',
        thumbnail_url: '',
        summary: '',
        content: '',
        publish_date: parseTime(Date.now(), '{y}-{m}-{d}')
      }
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate()
      })
    },
    // 编辑
    handleEdit(uuid) {
      getDetail(uuid).then((res) => {
        this.uuid = uuid
        Object.assign(this.temp, res.data)
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate()
        })
      })
    },
    // 保存
    saveData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          if (!this.temp.thumbnail_url) {
            return this.$message.error('请上传图片')
          }
          const d = JSON.parse(JSON.stringify(this.temp))
          const p = this.uuid ? edit(this.uuid, d) : add(d)
          p.then(() => {
            this.$parent.fetchData()
            this.dialogFormVisible = false
            this.$parent.$notify({
              title: '成功',
              message: this.uuid ? '修改成功' : '添加成功',
              type: 'success'
            })
          })
        }
      })
    }
  }
}
</script>
